\templates\camera.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FrankMocap 摄像头捕捉</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .camera-container {
            position: relative;
            width: 100%;
            margin: 20px auto;
            text-align: center;
        }
        .camera-feed {
            max-width: 100%;
            max-height: 80vh;
            border: 2px solid #333;
            border-radius: 8px;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>FrankMocap 摄像头捕捉</h1>
            <p>实时动作捕捉系统</p>
        </div>
    </header>

    <div class="container">
        <div class="main-content">
            <div class="control-panel">
                <div class="option-group">
                    <div class="option-title">选择捕捉模式</div>
                    <div class="radio-group">
                        <label class="radio-option">
                            <input type="radio" name="mode" value="frank" checked onchange="updateMode()"> 完整捕捉 (身体+手部)
                        </label>
                        <label class="radio-option">
                            <input type="radio" name="mode" value="body" onchange="updateMode()"> 仅身体捕捉
                        </label>
                        <label class="radio-option">
                            <input type="radio" name="mode" value="hand" onchange="updateMode()"> 仅手部捕捉
                        </label>
                    </div>
                </div>

                <div class="controls">
                    <button id="startBtn">开始捕捉</button>
                    <button id="stopBtn">停止捕捉</button>
                    <button id="backBtn">返回主页</button>
                </div>
            </div>

            <div class="display-panel">
                <div class="camera-container">
                    <img id="cameraFeed" class="camera-feed" src="" alt="摄像头画面">
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentMode = 'frank';
        let isStreaming = false;
        
        document.getElementById('startBtn').addEventListener('click', startCapture);
        document.getElementById('stopBtn').addEventListener('click', stopCapture);
        document.getElementById('backBtn').addEventListener('click', () => {
            stopCapture();
            window.location.href = '/';
        });
        
        function updateMode() {
            const radios = document.getElementsByName('mode');
            for (const radio of radios) {
                if (radio.checked) {
                    currentMode = radio.value;
                    if (isStreaming) {
                        // 重新启动流媒体以应用新模式
                        stopCapture();
                        startCapture();
                    }
                    break;
                }
            }
        }
        
        function startCapture() {
            const feed = document.getElementById('cameraFeed');
            feed.src = `/video_feed?mode=${currentMode}`;
            isStreaming = true;
        }
        
        function stopCapture() {
            if (isStreaming) {
                const feed = document.getElementById('cameraFeed');
                fetch('/stop_camera');
                feed.src = '';
                isStreaming = false;
            }
        }
    </script>
</body>
</html>